<template class="pro">
    <div class="productAdd" >
<!--          //页头组件-->
      <el-page-header style="color: black;line-height: 60px"
                      @back="goBack" content="添加菜品页面"></el-page-header>
      <!--    分割线-->
<!--      <el-divider></el-divider>-->
      <!--name代表上传文件时 文件的参数名
          limit="1" 设置只能选择一张图片
      -->

      <div style="">
      <el-card style="width: 40%;padding: 20px 20px;margin-top: 3%">
        <el-form label-width="80px">
          <el-form-item label="菜品名" label-width="80px">
            <el-input v-model="product.vegetableName" ></el-input>
          </el-form-item>
          <el-form-item label="价格" label-width="80px">
            <el-input v-model="product.vegetablePrice"></el-input>
          </el-form-item>
          <el-form-item label="购买量" label-width="80px">
            <el-input v-model="product.vegetableMax"></el-input>
          </el-form-item>
          <el-form-item label="库存" label-width="80px">
            <el-input v-model="product.vegetableStock" ></el-input>
          </el-form-item>
          <el-form-item label="分类" label-width="80px">
            <template>
              <el-select v-model="product.vegetableSort" placeholder="请选择">
                <!--              :lable控制下拉选选项的内容 :value代表值-->
                <el-option v-for="c in categoryArr" :label="c.name" :value="c.name">

                </el-option>

              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="菜品图片" label-width="80px">
            <el-upload
                :class="{uploadSty:showBtnDealImg,disUploadSty:noneBtnImg}"
                ref="upload"
                action="http://localhost:9600/upload/file"
                :headers="headers"
                limit="1"
                :on-success="handle_success"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="change"
            >
              <div style="left: -20px;top: -18px;position: absolute">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </el-upload>

          </el-form-item>
        </el-form>

        <el-button type="primary" @click="submitForm()">点击添加</el-button>
        <el-button @click="resetForm('product')">重置</el-button>
      </el-card>
      </div>
    </div>
</template>

<script>
import {addProduct} from "@/api/admin_api";

export default {
  name: "product-add",
  inject:['reload'],
  data(){
    return {
      product:{
        vegetableName:"",
        vegetableImage:"",
        vegetablePrice:"",
        vegetableMax:"",
        vegetableStock:"",
        vegetableSort:""
      },
      categoryArr:[
        {name: "蔬菜"},
        {name: "肉类"},
        {name: "海鲜"},
        {name: "水果"},

      ],
      img:'',
      fileList:'',
      file:'',
      showBtnDealImg:true,
      noneBtnImg:false,
      testFile:'',
    }
    },
  methods: {

    // 状态改变方法
    change(file,fileList){
      console.log("number ==== "+file);
      this.showBtnDealImg = false;
      this.noneBtnImg = true;
      this.$refs.upload.submit();
    },


    handle_success(response){
      console.log("图片为：===="+response.data)
      this.product.vegetableImage = response.data;
    },

    submitForm() {

        console.log("菜品名=="+this.product.vegetableName)
        console.log("菜品价格=="+this.product.vegetablePrice)
        console.log("菜品种类=="+this.product.vegetableSort)
        console.log("菜品库存=="+this.product.vegetableStock)

          addProduct(this.product).then(()=>{
            this.$message({
              message: '添加成功！',
              type: 'success'
            });
          })
    },

    resetForm() {
      this.reload();
      this.showBtnDealImg = true;
      this.noneBtnImg = false;

    },

    goBack(){
      //返回上一页面
      // history.back();
      this.$router.push("/admin");
    }
  },








}
</script>

<style>


.productAdd {
  height: 100%;
  background-image: url("../assets/addVegeBack1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.productAdd .el-card__body, .el-main{
  padding: 0 0 0 0;
}

.productAdd .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.productAdd .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.productAdd .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
/*上传文件*/
.productAdd .uploadSty .el-upload--picture-card{
  width:110px;
  height:110px;
  line-height:110px;
}
.productAdd .disUploadSty .el-upload--picture-card{
  display:none;   /* 上传按钮隐藏 */
}
</style>